<template>
	<view class="page">
		<view class="serve-list">
			<view class="input-item">
				<view class="item-title">服用药品</view>
				<input class="item-value" placeholder="请输入药品名称" v-model="parmes.takingMedicine" />
			</view>
			<view class="serve-item">
				<view class="item-title">服药时间</view>
				<view class="item-value" @click="chooseTime(0)">
					<text>{{ medicationTime }}</text>
					<image src="../../static/images/ic_next.png"></image>
				</view>
			</view>
			<view class="serve-item">
				<view class="item-title">下次检查时间</view>
				<view class="item-value" @click="chooseTime(1)">
					<text>{{ nextInspectionTime }}</text>
					<image src="../../static/images/ic_next.png"></image>
				</view>
			</view>
		</view>
		
		<view class="serve-list mt-20">
			<view class="title">客户标签</view>
			<view class="input-item">
				<view class="item-title">城市</view>
				<input class="item-value" placeholder="请输入城市" v-model="parmes.tagcity" />
			</view>
			<view class="input-item">
				<view class="item-title">职业</view>
				<input class="item-value" placeholder="请输入职业" v-model="parmes.tagJob" />
			</view>
			<view class="input-item">
				<view class="item-title">疾病</view>
				<input class="item-value" placeholder="请输入疾病" v-model="parmes.tagDisease" />
			</view>
			<view class="serve-item">
				<view class="item-title">经济状况</view>
				<view class="item-value" @click="handleSinglePickerShow('tagRich')">
					<text>{{ parmes.tagRich || '请选择经济状况' }}</text>
					<image src="../../static/images/ic_next.png"></image>
				</view>
			</view>
			<view class="input-item">
				<view class="item-title">肿瘤病种</view>
				<input class="item-value" placeholder="请输入肿瘤病种" v-model="parmes.tagTumor" />
			</view>
			<view class="input-item">
				<view class="item-title">肿瘤分期分型</view>
				<input class="item-value" placeholder="请输入肿瘤分期分型" v-model="parmes.tagPeriod" />
			</view>
			<view class="input-item">
				<view class="item-title">常用药物</view>
				<input class="item-value" placeholder="请输入常用药物" v-model="parmes.tagDrug" />
			</view>
			<view class="input-item">
				<view class="item-title">糖尿病</view>
				<u-radio-group v-model="parmes.tagIsDiabetes">
					<u-radio shape="circle" label="是" name="是"></u-radio>
					<u-radio shape="circle" label="否" name="否"></u-radio>
				</u-radio-group>
			</view>
			<view class="input-item">
				<view class="item-title">高血压</view>
				<u-radio-group v-model="parmes.tagIsHyper">
					<u-radio shape="circle" label="是" name="是"></u-radio>
					<u-radio shape="circle" label="否" name="否"></u-radio>
				</u-radio-group>
			</view>
			<view class="input-item">
				<view class="item-title">慢阻肺</view>
				<u-radio-group v-model="parmes.tagIscope">
					<u-radio shape="circle" label="是" name="是"></u-radio>
					<u-radio shape="circle" label="否" name="否"></u-radio>
				</u-radio-group>
			</view>
			<view class="serve-item">
				<view class="item-title">中医认可度</view>
				<view class="item-value" @click="handleSinglePickerShow('tagZhonhyi')">
					<text>{{ parmes.tagZhonhyi || '请选择中医认可度' }}</text>
					<image src="../../static/images/ic_next.png"></image>
				</view>
			</view>
		</view>
		
		<view class="service-records">
			<view class="title">服务记录</view>
			<textarea maxlength="-1" class="textarea" placeholder="请输入本次服务记录(必填)" v-model="parmes.serviceRecord"></textarea>
			<view class="image-list">
				<view class="image-item" v-for="(item, index) in imgList" :key="index">
					<image class="dishes-image" :src="item" mode="aspectFill"></image>
					<image src="../../static/images/detele.png" mode="" class="del-icon" @click.stop="delImage(index)"></image>
				</view>

				<image v-if="imgList.length < 9" @click="chooseImage()" class="upload-image" src="../../static/images/xupload.png" mode=""></image>
			</view>
		</view>

		<view class="submit-btn" @click="serviceComplete">服务完成</view>

		<u-picker ref="singlePickerRef" :show="showSinglePicker" :columns="singlePickerList" @confirm="confirmSinglePicker" @cancel="showSinglePicker = false"></u-picker>
		<!-- 时间选择 -->
		<u-datetime-picker :show="show" v-model="dateTime" mode="datetime" @cancel="show = false" @confirm="confirm"></u-datetime-picker>
	</view>
</template>

<script>
import { convertTimeType } from '../../utils/index.js';
import { uploadFile, serviceComplete } from '@/apis/request.js';
export default {
	data() {
		return {
			show: false,
			showSinglePicker: false,
			singlePickerField: '',
			dateTime: Number(new Date()),
			timeType: 0, //0服药时间  1下次检查时间
			imgList: [],
			medicationTime: '请选择服药时间',
			nextInspectionTime: '请选择下次检查时间',
			parmes: {
				medicationTime: '',
				nextInspectionTime: '',
				orderId: '',
				serviceRecord: '',
				serviceRecordImage: '',
				takingMedicine: '',
				tagcity: '厦门',
				tagIsDiabetes: '否',
				tagIsHyper: '否',
				tagIscope: '否'
			},
			singlePickerList: [],
			tagRichList: ['富裕', '较好','工薪','一般'],
			tagZhonhyiList: ['高', '中', '低']
		};
	},
	methods: {
		handleSinglePickerShow(field) {
			this.singlePickerField = field
			this.singlePickerList = [this[field+'List']]
			this.$refs.singlePickerRef.setIndexs([0])
			this.showSinglePicker = true
		},
		//选择服药时间
		chooseTime(type) {
			this.timeType = type;
			this.show = true;
		},
		//确认时间选择
		confirm(e) {
			this.show = false;
			if (this.timeType) {
				//1下次检查时间
				this.parmes.nextInspectionTime = convertTimeType(e.value);
				this.nextInspectionTime = convertTimeType(e.value);
			} else {
				//0服药时间
				this.parmes.medicationTime = convertTimeType(e.value);
				this.medicationTime = convertTimeType(e.value);
			}
		},
		confirmSinglePicker(e) {
			this.showSinglePicker = false
			this.parmes[this.singlePickerField] = e.value[0]
		},
		async serviceComplete() {
			if (!this.parmes.serviceRecord) return this.showToast('请输入本次服务记录');
			let imgs = [];
			for (let item of this.imgList) {
				await uploadFile(item).then(res => {
					imgs.push(res);
				});
			}
			this.parmes.serviceRecordImage = imgs.join();
			serviceComplete(this.parmes).then(res => {
				this.showToast('提交成功');
				uni.$emit('serviceComplete')
				setTimeout(function() {
					uni.navigateBack();
				}, 100);
			});
		},
		//上传图片
		chooseImage(count, type) {
			uni.chooseImage({
				count: 9 - this.imgList.length, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					this.imgList.push(...res.tempFilePaths);
				}
			});
		},
		//删除图片
		delImage(index) {
			this.imgList.splice(index, 1);
		},
		showToast(title) {
			uni.showToast({
				title: title,
				icon: 'none'
			});
		}
	},
	onLoad(options) {
		this.parmes.orderId = options.orderId;
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;
	padding-bottom: 120rpx;
	.mt-20 {
		margin-top: 20rpx;
	}
	.serve-list {
		background-color: #fff;
		
		.title {
			padding-top: 20rpx;
			padding-left: 20rpx;
		}
		.input-item {
			padding: 30rpx;
			border-bottom: 2rpx solid #ededed;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-value {
				flex: 1;
				text-align: right;
			}

			.item-title {
				flex: 1;
				min-width: 300rpx;
			}

			.item-value {
				flex: 3;

				image {
					margin-left: 10rpx;

					width: 16rpx;
					height: 28rpx;
				}
			}
			/deep/ .u-radio-group {
				justify-content: flex-end;
				gap: 40rpx;
			}
		}

		.serve-item {
			padding: 30rpx;
			border-bottom: 2rpx solid #ededed;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item-title {
				min-width: 300rpx;
			}
			.item-value {
				color: #999999;
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				image {
					margin-left: 10rpx;
					width: 16rpx;
					height: 28rpx;
				}
			}
			/deep/ .u-radio-group {
				justify-content: flex-end;
				gap: 40rpx;
			}
		}
	}

	.service-records {
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 30rpx;

		.title {
			// font-size: 30rpx;
		}

		.textarea {
			width: 100%;
			padding-top: 20rpx;
		}

		.image-list {
			display: flex;
			flex-wrap: wrap;

			.image-item {
				position: relative;
			}
		}

		.dishes-image {
			margin-top: 18rpx;
			margin-right: 24rpx;
			width: 172rpx;
			height: 172rpx;
		}

		.del-icon {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: 22rpx;
			top: 22rpx;
			z-index: 99;
		}

		.upload-image {
			margin-top: 20rpx;
			width: 172rpx;
			height: 172rpx;
		}
	}

	.submit-btn {
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background: #32C59A;
		color: #fff;
		text-align: center;
	}
}
</style>
